<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/JS/marked.min.js"></script>
    <script src="/JS/jquery.js"></script>
    <link rel="stylesheet" href="/CSS/articles/articles.css">
    <title>Articles</title>
</head>
<body>
    {%include "header.html"%}
    <div class="article_container" style="min-height: 95vh;">
        {%for article in reversed(articles)%}
                <div class="article">
                    <div class="top_content">
                        <div class="left_content">
                            <img src="{{'/article/'+article['folder']+'/'+article['head_image'] if article['head_image'] else '/ICON/head_image.jpg'}}" alt="">
                        </div>
                        <div class="right_content">
                            <h3>{{article["title"]}}</h3>
                            <div class="article_info">
                                <span class="upload_time">{{article["upload_time"]}}</span>
                                {%if article["topest"]%}
                                <span class="topest">置顶</span>
                                {%endif%}
                            </div>
                        </div>
                    </div>
                    <div class="bottom_content">
                        <span>{{article["short_descript"] if article["short_descript"] else '...'}}</span>
                        <span class="operation_menu">
                            <span class="tip">操作</span>
                            <div class="operation_container">
                                <span class="operation_list">
                                    <a href="/admin/edit_article/{{article['id']}}">编辑</a>
                                    <a href="/admin/delete_article/{{article['id']}}">删除</a>
                                </span>
                            </div>
                        </span>
                    </div>
                </div>
        {%endfor%}
    </div>
    {%include "footer.html"%}
</body>
<script>
    $(document).ready(function() {
        $(".operation_menu").on("mouseenter", function() {
            let operation_container = $(this).find(".operation_container");
            operation_container.css({
                "display": "block"
            });
            let operation_list = $(this).find(".operation_list");
            let height = operation_list.height();
            operation_container.stop().animate({
                "height": height + "px",
                "opacity": "1"
            },200);
        });
        $(".operation_menu").on("mouseleave", function() {
            let operation_container = $(this).find(".operation_container");
            operation_container.stop().animate({
                "height": "0px"             
            }, 200).animate({
                "opacity": "0"
            }, 200, function() {
                operation_container.css({
                    "display": "none"
                });
            });
        });
    });
</script>
</html>